<template>
	<view class="wrap">
		<uv-navbar title="资源市场" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIconSize="20px"
			leftIconColor="#313C56" :autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<view class=" width-100vw"
			style="background-color: white; border-top-left-radius: 16px; border-top-right-radius: 16px;"
			:style="{height: $uv.addUnit(pageHeight)}">
			<uv-input v-model="searchKey" placeholder="搜索公司/团队" placeholderStyle="color:#95A4B3;font-size:12px;"
				confirmType="search" :autoBlur="true" fontSize="12px" color="#333333" prefixIcon="search"
				prefixIconStyle="fongSize:14px; marginLeft: 12px; color:#313C56;" border="none" shape="circle"
				customStyle="background-color: #F3F5FB; height: 32px; marginLeft: 12px; marginRight: 12px; marginTop: 8px">
				<template v-slot:suffix>
					<view v-if="searching" class="flex-row-center" style="height: 32px; width: 32px;"
						@click="searchClear">
						<image src="../../static/searchClear.png" style="width: 16px; height: 16px;"></image>
					</view>
					<view v-else class="font-12 font-weight-regular flex-row-center resource-market_searchBtn"
						@click="searchTap">
						搜索
					</view>
				</template>
			</uv-input>
			<uv-tabs :list="tabs" customStyle="height:45px; marginTop: 6px"
				activeStyle="color:#313C56; fontWeight: 500; fontSize: 16px"
				inactiveStyle="color: #95A4B3; fontWight: 500; fontSize: 14px" lineColor="#EB7520" lineWidth="16px"
				lineHeight="4px" @click="tabsTap">
			</uv-tabs>
			<view style="margin-top: 10px; " :style="{height: scrollHeight + 'px'}">
				<mescroll-uni :height="scrollHeight+ 'px'" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:down="downOption" :up="upOption">
					<placeholder v-if="dataList==0"></placeholder>
					<view v-else class="flex-column">
						<!-- 公司、团队 -->
						<view v-for="(item,index) in dataList" :key="index" class="resource-market_item"
							@click="teamDetails(item.id)">
							<view class="flex-row flex-between flex-items-center">
								<text class="font-14 font-weight-semibold" style="color: #313C56;">{{ item.name }}</text>
								<!-- TODO 等级 0 - 5 -->
								<image v-if="item.creditLevel === 0" src="../../static/user/b0.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
								<image v-if="item.creditLevel === 1" src="../../static/user/b1.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
								<image v-if="item.creditLevel === 2" src="../../static/user/b2.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
								<image v-if="item.creditLevel === 3" src="../../static/user/b3.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
								<image v-if="item.creditLevel === 4" src="../../static/user/b4.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
								<image v-if="item.creditLevel === 5" src="../../static/user/b5.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
							</view>
							<text class="font-12 font-weight-regular uv-line-2"
								style="color: #6B7885; margin-top: 8px;">{{ item.intro }}</text>
						</view>
					</view>
					
				</mescroll-uni>
			</view>

		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getTeams
	} from "../../api";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				searchKey: '',
				searching: false,
				// 0=公司， 1=团队， 2=个人
				tabIndex: 0,
				tabs: [{
					name: '公司'
				}, {
					name: '团队'
				}],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: '-- 没有更多了 --',
					empty: {
						use: false
					}
				},
				// 列表数据
				dataList: []
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - 91 - 12
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 50
			}
		},
		mounted() {
			this.getTeams(0)
		},

		onLoad() {
			console.log(uni.$uv.sys())
		},

		methods: {
			upCallback(page) {
				let params = {
					page: page.num,
					limit: page.size,
					name: this.searchKey,
					type: this.tabIndex + 1
				}
				getTeams(params).then((data) => {
					console.log(data)
					var curPageData = data.list;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.totalPage;
					//设置列表数据
					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage);
				}).catch((e) => {
					this.mescroll.endErr()
				})
			},

			getTeams(index) {
				this.mescroll.resetUpScroll()
				// let params = {
				// 	page: 1,
				// 	limit: 10,
				// 	name: this.searchKey,
				// 	type: index + 1
				// }
				// console.error("searchKey: " + this.searchKey)
				// getTeams(params).then((data) => {
				// 	this.dataList = data.list
				// }).catch((e) => {})
			},

			/**
			 * tabs点击事件
			 */
			tabsTap(item) {
				this.tabIndex = item.index
				this.getTeams(this.tabIndex)
			},

			/**
			 * 详情跳转
			 */
			teamDetails(id) {
				uni.navigateTo({
					url: '/pages/company-detail/company-detail?id=' + id + "&sys=0"
				})
			},

			/**
			 * 搜索按钮事件
			 */
			searchTap() {
				if (!this.searchKey) {
          this.$refs.toast.show({
            msg: '请输入关键词!'
          })
          return
        }
				this.searching = true
				uni.hideKeyboard()
				this.getTeams(this.tabIndex)
			},

			/**
			 * 搜索框清除按钮
			 */
			searchClear() {
				this.searching = false
				this.searchKey = ''
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		background-image: url('../../static/userBg2.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.resource-market_item_label {
		padding-left: 8px;
		padding-right: 8px;
		height: 18px;
		border-radius: 9px;
		background-color: white;
		font-size: 12px;
		font-weight: 400;
		color: #6B7885;
		margin-right: 8px;
		margin-top: 5px;
	}

	.resource-market_item {
		background-color: #F7F9FD;
		border-radius: 10px;
		padding: 12px 16px;
		margin: 0px 12px 12px 12px;
		display: flex;
		flex-direction: column;
	}

	.resource-market_searchBtn {
		margin-right: 4px;
		color: white;
		width: 48px;
		height: 24px;
		background: linear-gradient(119deg, #EB5C20 0%, #EB9A20 100%);
		border-radius: 12px;
		opacity: 1;
	}
</style>